<script lang="ts" setup>
import { ref } from 'vue';
import { COUNTRIES_LIST } from '@/constants/countries';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();

const firstName = defineModel('firstName', { default: '' });
const lastName = defineModel('lastName', { default: '' });
const countryPrefix = defineModel('countryPrefix', { default: '' });
const phone = defineModel('phone', { default: '' });
const email = defineModel('email', { default: '' });

defineProps<{
  required?: boolean;
}>();

const currentCountryIndex = ref(0);

function setFirstName(e: AnyObject) {
  firstName.value = e.detail.value;
}

function setLastName(e: AnyObject) {
  lastName.value = e.detail.value;
}

function setCountryPrefix(e: AnyObject) {
  currentCountryIndex.value = e.detail.value;
  countryPrefix.value = COUNTRIES_LIST[currentCountryIndex.value].code;
}

function setPhoneNumber(e: AnyObject) {
  phone.value = e.detail.value;
}

function setEmail(e: AnyObject) {
  email.value = e.detail.value;
}
</script>

<template>
  <view class="apt-booker-info-edit__item">
    <view class="apt-booker-info-edit__item-label">
      {{ t('tripGuestFristName') }}
      <view v-if="required" class="required">*</view>
    </view>
    <view class="apt-booker-info-edit__item-value">
      <input
        :placeholder="t('LCKey_inputFirstName')"
        :value="firstName"
        class="apt-booker-info-edit__item-control"
        @input="setFirstName"
      />
    </view>
  </view>
  <view class="apt-booker-info-edit__item">
    <view class="apt-booker-info-edit__item-label">
      {{ t('tripGuestLastName') }}
      <view v-if="required" class="required">*</view>
    </view>
    <view class="apt-booker-info-edit__item-value">
      <input
        :placeholder="t('LCKey_inputLastName')"
        :value="lastName"
        class="apt-booker-info-edit__item-control"
        @input="setLastName"
      />
    </view>
  </view>
  <view class="apt-booker-info-edit__item">
    <view class="apt-booker-info-edit__item-label">
      {{ t('LCKey_mobile') }}
      <view v-if="required" class="required">*</view>
    </view>
    <view class="apt-booker-info-edit__item-value">
      <picker
        :range="COUNTRIES_LIST"
        :value="currentCountryIndex"
        range-key="name"
        @change="setCountryPrefix"
      >
        <view class="flex items-center mr-1">
          <text class="mr-1 text-base text-primary">{{ countryPrefix }}</text>
          <uni-icons color="#3d3d3d" size="16" type="down"></uni-icons>
        </view>
      </picker>
      <input
        :placeholder="t('LCKey_mobileInputPlaceholder')"
        :value="phone"
        class="apt-booker-info-edit__item-control"
        placeholder-class="apt-booker-info-edit__item-placeholder"
        @input="setPhoneNumber"
      />
    </view>
  </view>
  <view class="apt-booker-info-edit__item">
    <view class="apt-booker-info-edit__item-label">
      {{ t('LCKey_email') }}
      <view v-if="required" class="required">*</view>
    </view>
    <view class="apt-booker-info-edit__item-value">
      <input
        :placeholder="t('LCKey_emailInputPlaceholder')"
        :value="email"
        class="apt-booker-info-edit__item-control"
        placeholder-class="apt-booker-info-edit__item-placeholder"
        @input="setEmail"
      />
    </view>
  </view>
</template>

<style lang="scss">
.required {
  margin-left: 2px;
  color: #d13820;
  font-size: 24rpx;
  line-height: 34rpx;
}

.apt-booker-info-edit__item {
  align-items: center;
  border-bottom: 2rpx solid #f4f4f4;
  //padding: 32rpx 0;
  display: flex;

  &-label {
    display: flex;
    align-items: center;
    color: #3d3d3d;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
    padding: 32rpx 0;
  }

  &-value {
    align-items: center;
    display: flex;
    flex: 1;
    margin-left: 100rpx;
  }

  &-control {
    color: #3d3d3d;
    flex: 1;
    font-size: 28rpx;
    height: 104rpx;
    line-height: 40rpx;
  }

  &-placeholder {
    color: #adaeb0;
    font-size: 28rpx;
    line-height: 40rpx;
  }
}
</style>
